<template>
	<div class="LoginBody">
		<el-form class="LoginBox" :model="ruleForm" :rules="rules" ref="ruleForm">
			<h3 class="title">登录</h3>
			<el-form-item style="margin-bottom: 30px;" prop="username">
				<el-input placeholder="请输入账号" v-model="ruleForm.username" clearable>
					<i slot="prefix" class="el-icon-user-solid"></i>
				</el-input>
			</el-form-item>
			<el-form-item style="margin-bottom: 30px; " prop="password">
				<el-input placeholder="请输入密码" v-model="ruleForm.password" show-password>
					<i slot="prefix" class="el-icon-lock"></i>
				</el-input>
			</el-form-item>
			<!-- <el-form-item class="yzmBox" prop="yzm">
			  <el-input v-model="ruleForm.yzm" maxlength="4" placeholder="请输入验证码"></el-input>
			  <img
			    :src="$store.state.fileUploadRoad+'/Login/init'"
			    @click="getCaptchaImg"
			    ref="imgCode"
			    alt="验证码加载失败"
			  />
			</el-form-item> -->
			<!-- <el-checkbox style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
			<el-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="submitForm('ruleForm')">登录</el-button>
			<el-button type="primary" style="width: 100%;margin: 0;" @click="toRegister">注册</el-button>
		</el-form>
	</div>
</template>

<script>
import loginApi from "@/api/login";
import { mapMutations } from 'vuex';
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    // var validateYzm = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入验证码"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      data_users: [],
      ruleForm: {
        username: "",
        password: "",
        // yzm: "",
      },
      rules: {
        username: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
	  ...mapMutations(['settoken']),
	  ...mapMutations(['setUserInfo']),
    async login() {
      const res = await loginApi.login("/Login/doLogin", {
        userName: this.ruleForm.username,
        password: this.ruleForm.password
      });
      if (res.code == 200) {
        this.data_users = res.data;
		console.log(this.data_users.userinfo);
		localStorage.setItem("userInfo", JSON.stringify(res.data.userinfo));
		if (res.data.userinfo.role === "admin") {
				this.settoken(res.data.token);
		        this.$router.push("/Management");
		      } else if (res.data.userinfo.role === "user") {
				this.settoken(res.data.token);
				this.$router.push("/HomeMenu");
				location.reload();
		      }
			  this.$message({
			      showClose: true,
			      message: '登录成功',
			      type: 'success'
			  });
      }else{
		  this.$message.error(res.msg);
	  }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // // 验证码
    // getCaptchaImg() {
    //   this.$refs.imgCode.src =
    //     this.$store.state.fileUploadRoad+"/Login/init?time=" + new Date().getTime();
    // },
    // 跳转注册页
    toRegister(){
      this.$router.push("/Register");
      console.log("sdasd")
    }
  },
  created() {
  },
	};
</script>

<style lang="scss" scoped>
	.LoginBody {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 98vh;
		background: url("../assets/images/login-background.jpg");
		background-size: cover;
		.LoginBox{
			border-radius: 6px;
			background: #ffffff;
			width: 400px;
			padding: 20px 25px 30px 25px;
			.title{
				margin: 0px auto 30px auto;
				text-align: center;
				color: #707070;
			}
			.yzmBox{
				display: flex;
				.el-input{
					width: 50%;
				}
				.img{
					margin-left: 5%;
					cursor: pointer;
				}
			}
		}
	}
</style>